<template>
    <div class="index-container-Info" >
        <ul class="Info-nav font">
            <li v-for="(item,key) in content" @mouseover="onChange(key)" ><router-link :class="{'active': key===serviceIndex}" :to="{name:path}">{{key}}</router-link></li>
        </ul>
        <div class="Info-content font" v-for="(item,key) in content" v-if="key===serviceIndex" >
            <li v-for="(item2,index) in item">
                <router-link  :to="{name:detail,params:{id:item2.id}}">
                    <!-- <Icon type="android-clipboard" style="margin:0 5px;"></Icon> -->
                    <img src='../../images/blue1.jpg'>
                    {{item2.title}}
                </router-link>
                <div style="color:#333333;line-height:40px;font-size:16px;float:right;">
                    {{item2.create_time == null? new Date(parseInt(item2.createtime)).toLocaleDateString():new Date(parseInt(item2.create_time)).toLocaleDateString()}} 
                </div>
            </li>
        </div>
     </div>      
</template>
<script>
    export default {
        props: {
            content:{
                type: Object
            }
        },
        data () {
            return {
                serviceIndex: "服务信息",
                path: "find_service",
                detail: "service_detail"
        }
    },
    methods:{
        onChange(key){
            this.serviceIndex = key;
            if(key === "服务信息"){
                this.path = "find_service";
                this.detail = "service_detail";
            }
            else if(key === "需求信息"){
                this.path = "find_demand";
                this.detail = "demand_detail";
            }
            else if(key === "平台服务"){
                this.path = "specialservice_list";
                this.detail = "specialservice_detail";
                
            }
        }
    }
}
</script>
<style scoped>
       .index-container-Info{
         height:395px;
         border: 1px solid #aaaaaa;
     }
     .Info-nav{
         height: 45px;
         width: 100%;
         border-bottom: 1px solid #aaaaaa;
     }
     .Info-nav li{  
         float: left;
         width: 100px;
     }
     .Info-nav li a{
         display: block;
         height: 45px;
        line-height: 45px;
        text-align: center;
         text-decoration: none;
         color: #333333;
         font-size: 18px;
     }
    .active{
        background-color: #e24121;
        color: #ffffff !important;
    }
    .Info-content{
        height: 349px;
        padding-left: 20px;
        padding-right:20px;
    }
    .Info-content li{
        height: 40px;
        line-height: 40px;
        list-style: none;
        font-size: 16px;
        overflow: hidden;
    }
    .Info-content a{
        float: left;
        display: block;
        color: #333333;
        width: 75%;
    }
    .Info-content a:hover{
        font-weight: 700;
    }
</style>